<template>
  <div class="operate-time-components">
    <el-date-picker
      v-model="iTimes"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      format="yyyy 年 MM 月 dd 日"
      value-format="timestamp"
      :picker-options="timePickerOptions"
      >
    </el-date-picker>
  </div>
</template>
<script>
import { mapGetters , mapActions } from 'vuex';
export default {
  name: '',
  data(){
    return {
      iTimes: [],
      timePickerOptions:{
        disabledDate(time) {
            return time.getTime() > Date.now();
        },
      }
    }
  },
  props:[],
  created(){
    if(!this.getTimeVal.length){
      this.FnDefaultTime();//默认7天的时间
    }else {
      this.iTimes = this.getTimeVal;
    }
  },
  mounted(){

  },
  methods:{
    ...mapActions(['SETTIMEVAL']),
    FnDefaultTime(){//默认7天的时间
      const start = new Date().getTime();
      const end = start-(3600 * 1000 * 24 * 7);
      this.iTimes = [end,start];
    },
    FngetTime(e){
      var now = new Date(e);
      var y = now.getFullYear();
      var m = now.getMonth() + 1;
      var d = now.getDate();
      var t =  y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
      return t;
    }
  },
  components:{

  },
  computed:{
    ...mapGetters(['getTimeVal'])
  },
  watch:{
    'iTimes':{
      handler:function(nv,ov){
        this.SETTIMEVAL(nv);
      },
      deep:true
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
.operate-time-components {
    display: inline-block;
    height: 40px;
    vertical-align: top;
    margin-bottom: 25px;
    margin-top: 25px;
    .operate-time-data  {
      margin-bottom: 5px;
    }
}
</style>
